<template>
	<view class="pad_def pad_top">
		<u-toast ref="uToast"></u-toast>
		<view class="header_switc box box-align-center box-pack-between pad_def ">
			<view class="left">
				<view class="tit">
					通话功能总开关
				</view>
				<view class="sub_tit">
					开关关闭则学生平板端无法使用通话功能关闭不影响SIM卡流量（数据）功能
				</view>
			</view>
			<view class="right">
				<u-switch v-model="setting_call" active-color="#5993ff" inactive-color="#e3e3e3" @change="((val)=>{dataChange(val, 'setting_call')})"></u-switch>
			</view>
		</view>
		
		<view class="contacts_list mar_top">
			<view class="contacts_item box box-align-center box-pack-between mar_bot" v-for="item in phoneList" :key="item.id" @click="toEdit(item)">
				<view class="box box-align-center">
					<image :src="item.avatar" mode="widthFix" style="width: 100rpx;border-radius: 50%;"></image>
					<view class="name">{{item.name}}</view>
				</view>
				<view class="main">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/dh.png" mode="widthFix" class="icon"></image>
					<view class="phone">电话 {{item.phone}}</view>
					<view class="time">修改时间 {{item.time}}</view>
				</view>
				<view class="">
					<u-button type="error" size="mini" :plain="true" @click="delRelation(item.id)">删除</u-button>
				</view>
			</view>
		</view>
		
		<view >
			<u-button type="primary" shape="circle" @click="isVisible=true">添加白名单号码</u-button>
		</view>
		
		<view>
				<u-popup v-model="isVisible" mode="center"  border-radius="25" height="70%" width="70%" @close="closeForm()">
					<u-form :model="form" ref="uForm">
						<u-form-item label="上传头像" label-width="160rpx" prop="avatar">
							<view style="display: flex; justify-content: flex-end; align-items: center; width: 80%;">
								<u-image width="100rpx" mode="widthFix" shape="circle" :src="form.avatar" border-radius="50rpx" @click="selectFile"></u-image>
							</view>
						</u-form-item>
						<u-form-item label="与孩子关系:" label-width="160rpx" label-align="right" prop="name">
							<u-input v-model="form.name" type="select" :border="true" @click="showRelation=true"></u-input>
							<u-select v-model="showRelation" :list="relationList"></u-select>
							<u-action-sheet :list="relationList" v-model="showRelation" @click="actionSheetCallback"></u-action-sheet>
						</u-form-item>
						<u-form-item label="电话号码:" label-width="160rpx" label-align="right" prop="phone">
							<u-input v-model="form.phone" type="number" clearable :border="true"></u-input>
						</u-form-item>
						<u-form-item>
							<view style="display: flex; justify-content: space-between; align-items: center; width: 70%; margin-left: 76rpx;">
								<u-button v-if="editPhone" size="mini" type="primary" @click="editRelation">修改</u-button>
								<u-button v-else size="mini" type="primary" @click="addRelation">添加</u-button>
								<u-button size="mini" @click="cancelSubmit()">取消</u-button>
							</view>
						</u-form-item>
					</u-form>
				</u-popup>
		</view>
	</view>
</template>

<script>
import { addWhitePhone, delWhitePhone, editSetting, editWhitePhone, getSetting, getWhitePhone } from '../../api/systemControl';
import { ossImage, ossUploadApk } from '../../utils/ossUpload.js';

	export default {
		data() {
			return {
				id: 0,   //other_setting表id
				setting_call:false,
				isVisible: false,
				showRelation: false,
				editPhone: false,
				content:'确认删除改联系人吗？',
				phoneList: [],
				relationList: [
					{text: '爸爸'},
					{text: '妈妈'},
					{text: '爷爷'},
					{text: '奶奶'}
				],
				form: {
					avatar: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/uploads/2023-07-29/miniMan.png',
					name: '',
					phone: ''
				},
				rules: {
					avatar: [{required: true, message: '请上传头像', trigger: 'blur'}],
					name:  [{required: true, message: '请选择与孩子关系', trigger: 'change'}],
					phone: [{required: true, message: '请输入手机号码', trigger: 'blur'}],
				}
			};
		},
		onLoad() {
			this.getSettingControl()
			this.getWhitePhoneControl()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods:{
			getSettingControl() {
				getSetting({
					id: uni.getStorageSync("snId")
				}).then(res => {
					let data = res.data
					this.id = res.data.id
					this.setting_call = Boolean(data['setting_call'])
				}).catch(err => {
					
				})
			},
			getWhitePhoneControl() {
				getWhitePhone({
					id: uni.getStorageSync("snId")
				}).then(res => {
					this.phoneList = res.data
				}).catch(err => {
					this.phoneList = []
				})
			},
			//修改系统管控信息
			dataChange(val, name) {
			    let editForm = {
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip'),
					name: name,
					value: Number(val),
					snId: uni.getStorageSync('snId'),
					id: this.id
				}
				editSetting(editForm).then(res => {
					this.getSettingControl()
					this.$refs.uToast.show({
						title: res.msg,
						icon: false,
						type: 'success'
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
					this.getSettingControl()
				})
			},

			selectFile() {
				let that = this
				uni.chooseImage({
					count: 1, // 默认最多一次选择9张图
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						let tempFilePaths = res.tempFilePaths; //本地临时路径
						ossImage('picture', tempFilePaths[0]).then(res=> {
							console.log("这是上传路径", res)
							that.form.avatar = res
						}).catch(err => {
							that.$refs.uToast.show({
								title: 上传失败,
								icon: false,
								type: 'error'
							})
						})
					}
				})
			},
			
			actionSheetCallback(index) {
				this.form.name = this.relationList[index].text;
			},
			addRelation() {
				this.$refs.uForm.validate(valid => {
					let addForm = JSON.parse(JSON.stringify(this.form))
					addForm.id = uni.getStorageSync('snId'),
					addForm.userId = uni.getStorageSync('userId'),
					addForm.last_ip = uni.getStorageSync('Ip')
					if (valid) {
						addWhitePhone(addForm).then(res => {
							this.isVisible = false
							this.getWhitePhoneControl()
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								icon: false
							})
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								icon: false,
								type: 'error'
							})
						})
					}else {
						console.Console('未验证通过')
					}
				});
			},
			delRelation(id) {
				delWhitePhone({
					white_phone_id: id,
					id: uni.getStorageSync('snId')
				}).then(res => {
					this.getWhitePhoneControl()
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
				})
			},
			toEdit(item) {
				this.form = {
					name: item.name,
					avatar: item.avatar,
					phone: item.phone,
					white_phone_id: item.id
				}
				this.isVisible=true
				this.editPhone=true
			},
			cancelSubmit() {
				this.isVisible = false
				this.editPhone = false
			},
			closeForm() {
				console.log('这是关闭')
				this.editPhone = false
				this.$nextTick(() => {
					this.form = this.$options.data().form
				})
			},
			editRelation() {
				this.$refs.uForm.validate(valid => {
					let editForm = JSON.parse(JSON.stringify(this.form))
					editForm.id = uni.getStorageSync('snId'),
					editForm.userId = uni.getStorageSync('userId'),
					editForm.last_ip = uni.getStorageSync('Ip')
					if (valid) {
						editWhitePhone(editForm).then(res => {
							this.isVisible = false
							this.editPhone = false
							this.$refs.uForm.resetFields()
							this.getWhitePhoneControl()
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								icon: false
							})
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								icon: false,
								type: 'error'
							})
						})
					}else {
						console.Console('未验证通过')
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.header_switc{
	border-radius: 30rpx;
	background: #5070b9;
	padding: 50rpx 40rpx;
	.left{
		width: 75%;
		.tit{
			font-size: 30rpx;
			color: #fff;
		}
		.sub_tit{
			font-size: 24rpx;
			color: #7d9ce1;
			padding-right: 40rpx;
		}
	}
}
.contacts_list{
	.contacts_item{
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		.name{
			font-size: 36rpx;
			padding-left: 20rpx;
		}
		.main{
			position: relative;
			.icon{
				position: absolute;
				top: -20rpx;
				right: 10rpx;
				width: 35rpx;
			}
			.phone{
				font-size: 30rpx;
			}
			.time{
				font-size: 22rpx;
				color: #cccccc;
			}
		}
	}
}
.footer_add{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 200rpx;
	padding-top: 20rpx;
	background-color: #fff;
	padding: 40rpx 80rpx;
}

</style>
